<template>
  <div>
    <Header />
    <div class="home">
      <div class="g-box">
        <div class="card coffer">
          <div class="title">
            <h2>My Coffer</h2>
            <img src="@/assets/images/icon-coffer.png" />
          </div>
          <div class="grid">
            <div class="item">
              <div class="name">TSE in wallet</div>
              <div class="value">{{ balance | formatNumber }}</div>
            </div>
            <div class="item"></div>
            <div class="item">
              <div class="name">TSE to Harvest in farms</div>
              <div class="value">0</div>
            </div>
            <div class="item">
              <div class="name">TSE & others to Harvest in pools</div>
              <div class="value">0</div>
            </div>
          </div>
          <div class="button-group">
            <div class="item">
              <div class="g-clickable g-card-button-gradient button">
                <span>Collecting TSE</span>
              </div>
            </div>
            <div class="item">
              <div class="g-clickable g-card-button-gradient button">
                <span>Harvest all</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card tse">
          <div class="title">
            <h2>TSE Info</h2>
            <img src="@/assets/token/icon-tse.svg" />
          </div>
          <div class="grid">
            <div class="item">
              <div class="name">Price</div>
              <div class="value" v-if="price">${{ price | formatPrice }}</div>
              <div class="value" v-else>--</div>
            </div>
            <div class="item">
              <div class="name">Total Supply</div>
              <div class="value">{{ totalSupply | formatNumber }}</div>
            </div>
            <div class="item">
              <div class="name">Circulation</div>
              <div class="value">1,000,000</div>
            </div>
            <div class="item">
              <div class="name">Burnt</div>
              <div class="value">0</div>
            </div>
            <div class="item">
              <div class="name">Market capitalization</div>
              <div class="value">${{ +marketValue | formatNumber }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="title">
            <h2>$612,140,030 <span>Liquitity</span></h2>
            <img src="@/assets/images/icon-liquidity.png" />
          </div>
          <div class="chart" id="chart1"></div>
        </div>
        <div class="card">
          <div class="title">
            <h2>$320,140,013 <span>Volume(24hr)</span></h2>
            <img src="@/assets/images/icon-volume.png" />
          </div>
          <div class="chart" id="chart2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ApexCharts from "apexcharts";
import { mapState } from "vuex";
import { getTotalSupply, getBalance } from "@/init";
import { getTokenBySymbol } from "@/utils/token";
import { config } from "./config";
import BigNumber from "bignumber.js";

export default {
  components: {
    Header,
  },
  data() {
    const { options1, options2 } = config;
    return {
      balance: 0,
      totalSupply: 0,
      options1,
      options2,
    };
  },
  computed: {
    ...mapState({
      price: (state) => state.price,
      account: (state) => state.account,
    }),
    marketValue() {
      if (!this.totalSupply || !this.price) return 0;
      const d = new BigNumber(this.totalSupply);
      return d.multipliedBy(this.price).toFixed(4);
    },
  },
  watch: {
    account() {
      this.getBalanceOf();
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      const chart1 = new ApexCharts(
        document.querySelector("#chart1"),
        this.options1
      );
      chart1.render();
      const chart2 = new ApexCharts(
        document.querySelector("#chart2"),
        this.options2
      );
      chart2.render();
    },
    async getBalanceOf() {
      const token = getTokenBySymbol("TSE");
      const { balance } = await getBalance(token);
      this.balance = balance;
      const totalSupply = await getTotalSupply(token);
      this.totalSupply = totalSupply;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.g-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card {
  width: 725px;
  min-height: 320px;
  background-color: var(--card);
  padding: 15px 30px 30px;
  margin-bottom: 25px;
  border-radius: 30px;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 28px;
      font-family: "Roboto Bold";
      display: flex;
      align-items: center;
    }

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      margin-left: 10px;
    }

    img {
      width: 56px;
    }
  }

  &.coffer {
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    .grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-top: 50px;
      .item {
        margin-bottom: 40px;

        .name {
          margin-bottom: 20px;
        }
      }
    }
  }

  &.tse {
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;

    .title {
      img {
        width: 48px;
      }
    }
    .grid {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .item {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .grid {
    .name {
      font-size: 15px;
      font-family: "Roboto Medium";
      color: var(--color-content);
    }

    .value {
      font-size: 16px;
      font-family: "Roboto Black";
    }
  }

  .chart {
    height: 320px;
  }

  .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    .button {
      width: 168px;
      height: 54px;
      border-radius: 54px;

      span {
        font-size: 15px;
        font-family: "Roboto Medium";
      }
    }
  }
}
</style>
